<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改商家店铺')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-WxShop-edit" th:object="${wxShop}">
        <input name="id" th:field="*{id}" type="hidden">
        <input name="deptId" type="hidden" id="treeId"/>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">门头照：</label>
                    <input name="HeadImg" th:each="img : *{HeadImgs}" th:value="${img.imgPath}"
                           class="form-control hidden"
                           type="text">
                    <div class="col-sm-10">
                        <input class="file" id="showHeadImg" type="file" multiple data-min-file-count="1"
                               data-theme="fas" readonly>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">营业执照：</label>
                    <input name="SellImg" th:each="img : *{SellImgs}" th:value="${img.imgPath}"
                           class="form-control hidden"
                           type="text">
                    <div class="col-sm-10">
                        <input class="file" id="showSellImg" type="file" multiple data-min-file-count="1"
                               data-theme="fas" readonly>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6" disabled>
                <div class="form-group">
                    <label class="col-sm-4 control-label">商铺名称：</label>
                    <div class="col-sm-8">
                        <input name="shopName" id="shopName" th:field="*{shopName}" class="form-control" type="text"
                               required
                               disabled="disabled" readonly>
                    </div>
                </div>
            </div>
            <input name="wxUserId" th:field="*{wxUserId}" hidden>
            <div class="col-sm-6" disabled>
                <div class="form-group">
                    <label class="col-sm-4 control-label ">管理员电话：</label>
                    <div class="col-sm-8">
                        <input name="shopTel" id="shopTel" th:field="*{shopTel}" class="form-control" type="text"
                               required
                               readonly>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">商铺分类：</label>
                    <div class="col-sm-8">
                        <select name="shopTypeId" id="shopTypeId" th:with="type=${@dict.selectShopTypeList()}"
                                class="form-control m-b" disabled="disabled">
                            <option th:each="dict : ${type}" th:text="${dict.typeName}" th:value="${dict.id}"
                                    th:field="*{shopTypeId}"></option>
                        </select>

                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">当前让利比：</label>
                    <div class="col-sm-8">
                        <select name="discountRatio" th:field="*{discountRatio}" class="form-control m-b"
                                disabled="disabled" required>
                            <option value="0.02">2%</option>
                            <option value="0.03">3%</option>
                            <option value="0.04">4%</option>
                            <option value="0.05">5%</option>
                            <option value="0.06">6%</option>
                            <option value="0.07">7%</option>
                            <option value="0.08">8%</option>
                            <option value="0.09">9%</option>
                            <option value="0.1">10%</option>
                            <option value="0.11">11%</option>
                            <option value="0.12">12%</option>
                            <option value="0.13">13%</option>
                            <option value="0.14">14%</option>
                            <option value="0.15">15%</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6" disabled>
                <div class="form-group">
                    <label class="col-sm-4 control-label">店铺地址：</label>
                    <div class="col-sm-8">
                        <input th:field="*{shopAdress}" class="form-control" type="text"
                               readonly>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">审核结果：</label>
                    <div class="col-sm-8">
                        <select name="isValid" id="isValid" class="form-control m-b" required>
                            <option value="0">待审核</option>
                            <option value="1">通过</option>
                            <option value="2">驳回</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">创建后台账户</h4>
        <!--未审核-->
        <div class="row notApply">
            <h4 class="h2">请慎重审核</h4>
        </div>
        <!--审核不通过-->
        <div class="row badApply" hidden>
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label">拒绝理由：</label>
                    <div class="col-xs-10">
                        <textarea name="remarks" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <!--审核通过-->
        <div class="row goodApply" hidden>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">单位名称：</label>
                    <div class="col-sm-8">
                        <input  id="shopCompany" class="form-control" type="text" maxlength="30"
                               required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">登录账号：</label>
                    <div class="col-sm-8">
                        <input name="loginName" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row goodApply" hidden>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label">角色：</label>
                    <div class="col-sm-8">
                        <label th:each="role:${roles}" class="check-box">
                            <input name="role" type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}"
                                   th:disabled="${role.status == '1'}">
                        </label>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label">操作：</label>
                    <div class="col-sm-8">
                        <button type="button" class="btn btn-sm btn-warning" onclick="lookOffHistory()"><i class="fa fa-search"></i>注销记录
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!--图片预览-->
<div id="outerdiv"
     style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src=""/>
    </div>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: select2-js"/>
<script type="text/javascript">
    var prefix = ctx + "WxShop/WxShop";
    $("#form-WxShop-edit").validate({
        focusCleanup: true
    });

    //监听类型下拉框选择
    $("#isValid").change(function () {
        if ($(this).val() == 0) {  //未审核状态
            $('.notApply').show()
            $('.goodApply').hide();
            $('.badApply').hide();
        } else if ($(this).val() == 1) {   //审核通过，出现后台用户选择框
            $('.goodApply').show();
            $('.badApply').hide();
            $('.notApply').hide();
        } else {//审核不通
            $('.badApply').show();
            $('.goodApply').hide();
            $('.notApply').hide()
        }
    })
    /*单位名称*/
    $("#shopCompany").blur(function () {
        var shopCompany = $.common.trimAllG($("#shopCompany").val())
        if (shopCompany) {
            $.ajax({
                url: prefix + "/queryByShopCompany",
                type: 'post',
                data: {shopCompany: shopCompany},
                dataType: "json",
                beforeSend: function () {
                    $.modal.loading("正在查询信息中，请稍后...");
                },
                success: function (res) {
                    $.modal.closeLoading()
                    if (res.code == 0) {
                        $.modal.alertError("此单位名称不能重复使用");
                        $("#shopCompany").val("")
                    }
                }
            })
        }
    });

    function lookOffHistory() {
      var shopCompany =  $.common.trimAllG($("#shopCompany").val());
      if (shopCompany){
          var url = prefix + "/lookByShopCompany?shopCompany=" +shopCompany ;
          $.modal.openTab("注销记录", url);
      } else {
          $.modal.alertError("未填写单位名称");
      }
    }



    //门头照
    var headImgs = $("input[name='HeadImg']");
    var headArray = []
    for (var x = 0; x < headImgs.length; x++) {
        headArray.push(ctx + headImgs[x].defaultValue);
    }
    $("#showHeadImg").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "upload/insert", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png', 'mp3'],//接收的文件后缀
        uploadAsync: false, //默认异步上传
        minFileCount: 1,
        maxFileCount: 5,
        showUpload: false, //是否显示上传按钮
        showRemove: false, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        initialPreviewAsData: true,
        initialPreviewFileType: 'image',
        initialPreview: headArray,
        enctype: 'multipart/form-data',
        validateInitialCount: true
    });

    //营业执照
    var sellImgs = $("input[name='SellImg']");
    var sellArray = []
    for (var x = 0; x < sellImgs.length; x++) {
        sellArray.push(ctx + sellImgs[x].defaultValue);
    }
    $("#showSellImg").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "upload/insert", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png', 'mp3'],//接收的文件后缀
        uploadAsync: false, //默认异步上传
        minFileCount: 1,
        maxFileCount: 1,
        showUpload: false, //是否显示上传按钮
        showRemove: false, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        initialPreviewAsData: true,
        initialPreviewFileType: 'image',
        initialPreview: sellArray,
        enctype: 'multipart/form-data',
        validateInitialCount: true
    });

    $(function () {
        $(".file-footer-buttons").remove()
        $(".glyphicon").remove()
        $('.kv-file-content img').addClass('pimg');
        $(".pimg").click(function () {
            var _this = $(this); //将当前的pimg元素作为_this传入函数
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        });
    })

    //保存提交
    function submitHandler() {
        if ($.validate.form()) {
            var data = $('#form-WxShop-edit').serializeArray();
            var roleIds = $.form.selectCheckeds("role");
            var shopCompany =  $.common.trimAllG($("#shopCompany").val());
            var isValid = $('#isValid').val()
            if (isValid ==1 && !roleIds) {
                $.modal.alertError("请确认角色");
                return false;
            }
            data.push({"name": "roleIds", "value": roleIds});
            data.push({"name": "shopName", "value": $("#shopName").val()});
            data.push({"name": "shopCompany", "value": shopCompany});
            data.push({"name": "phonenumber", "value": $("#shopTel").val()});
            $.operate.saveTab(prefix + "/apply", data);
        }
    }

    //    图片预览
    function imgShow(outerdiv, innerdiv, bigimg, _this) {
        var src = _this.attr("src"); //获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src); //设置#bigimg元素的src属性

        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function () {
            var windowW = $(window).width(); //获取当前窗口宽度
            var windowH = $(window).height(); //获取当前窗口高度
            var realWidth = this.width; //获取图片真实宽度
            var realHeight = this.height; //获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if (realHeight > windowH * scale) { //判断图片高度
                imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度
                if (imgWidth > windowW * scale) { //如宽度扔大于窗口宽度
                    imgWidth = windowW * scale; //再对宽度进行缩放
                }
            } else if (realWidth > windowW * scale) { //如图片高度合适，判断图片宽度
                imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度
            } else { //如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放

            var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距
            var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距
            $(innerdiv).css({
                "top": h,
                "left": w
            }); //设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg
        });

        $(outerdiv).click(function () { //再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }
</script>
</body>
</html>